//1. 引入路由
import Vue from "vue";
import VueRouter from "vue-router";

/* 
  当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
  结合 Vue 的异步组件 (opens new window)和 Webpack 的代码分割功能 (opens new window)，轻松实现路由组件的懒加载。
*/
// import Home from "../views/Home";
// import Login from "../views/Login";
// import News from "../views/Home/components/News";
// import Music from "../views/Home/components/Music";
// import Game from "../views/Home/components/Game";
const Home = () => import("../views/Home");
const Login = () => import("../views/Login");
const News = () => import("../views/Home/components/News");
const Music = () => import("../views/Home/components/Music");
const Game = () => import("../views/Home/components/Game");
const GameItem = () => import("../views/Home/components/Game/Item");
const Four = () => import('../views/Four')

//2. 把路由作为插件使用
Vue.use(VueRouter);

//3. 实例化路由得到路由对象
export default new VueRouter({
    //设置路由模式为history模式!!!!
    mode: "history",
    //使用routes配置项配置路由表
    routes: [
        {
            path: "/home",
            component: Home,
            //如果当前的路由设置有默认子路由,则不建议书写name命名路由
            // name: "Home",
            //默认子路由配置方式2
            redirect: "/home/news",
            children: [
                {
                    //二级路由及多级路由的path两种写法:1.完整的路径  2.只写当前二级路由的字符串地址,不带/
                    path: "news",
                    component: News,
                    name: "News",
                    meta: {
                        icon: 'xxx',
                        title: '新闻'
                    }
                },
                {
                    path: "music",
                    component: Music,
                    name: "Music",
                },
                {
                    path: "game",
                    component: Game,
                    name: "Game",
                    children: [
                        {
                            path: "item/:id/:title?",
                            component: GameItem,
                            name: "GameItem",
                            /* 
                              定义路由的时候可以配置 meta 字段
                              有时候，你可能希望将任何信息附加到路由上，如路由的名称、谁可以访问路由，当前路由展示的图标等等、
                              这些事情可以通过meta属性来实现，并且它可以在任意地方都被访问到
                              当前我们可以通过this.$route.meta来获取
                            */
                            meta: {
                                icon: 'xx1',
                                title: 'Item组件'
                            },
                            props($route) {
                                return {
                                    ...$route.params,
                                    ...$route.query,
                                    a: 1
                                }
                            }
                        },
                    ],
                },
                //默认子路由配置方式1
                /*  {
                  path: "",
                  redirect: "/home/news",
                }, */
            ],
        },
        {
            path: "/login",
            component: Login,
            name: "Login",
        },

        {
            path: '*',
            component: Four
        },
        //匹配默认路由
        {
            path: "/",
            //重定向的配置
            redirect: "/home",
        },
    ],
});
